﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/bootstrap-theme.css" rel="stylesheet" />
    <script src="js/jquery_2_1_min.js"></script>
    <script src="js/FastHttpApi.js"></script>
    <script src="js/apis.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>FastHttpApi WebSocket</title>
</head>
<body>
    <div class="container bs-docs-container">
        <div class="row">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">FastHttpApi Chat room sample</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->

                </div><!-- /.container-fluid -->
            </nav>
            <ul class="nav nav-tabs">

                <li role="presentation"><a href="index.html">聊天室</a></li>
                <li role="presentation" class="active"><a href="#">管理</a></li>
            
            </ul>
            <br />
            <div class="col-md-3" role="main">
                <div class="panel panel-default">
                    <div class="panel-heading">房间</div>
                    <div class="panel-body">

                        <table class="table">
                            <thead>

                            </thead>
                            <tbody id="lstRoom">
                                <tr v-for="item in Data">
                                    <td style="width:160px;"><a class="btn btn-default" style="width:100%" href="javascript:void(0)" v-on:click="selectRoom(item.Name)">{{item.Name}}</a></td>
                                    <td> <button type="button" v-on:click="closeRoom(item.Name)" class="btn btn-danger">删除</button></td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-md-5" role="main">
                <div class="panel panel-default">
                    <div class="panel-heading" id="roomTitle">聊天记录</div>
                    <div class="panel-body">
                        <div id="lstTalk" style="height:500px;overflow: auto; overflow-x:hidden;">
                            <p v-for="item in Data" style="padding-top:4px;">
                                <span class="label label-default" style="margin-right:4px;">
                                    [{{item.Room}}]({{item.Time}}){{item.Name}}
                                </span>
                                <span class="label label-success" v-if="item.Type=='CheckIn'">
                                    {{item.Message}}
                                </span>
                                <span class="label label-warning" v-else-if="item.Type=='CheckOut'">
                                    {{item.Message}}
                                </span>
                                <span class="label label-info" v-else>
                                    {{item.Message}}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" role="main">
                <div class="panel panel-default">
                    <div class="panel-heading">房间用户</div>
                    <div class="panel-body">
                        <form class="bs-example" data-example-id="btn-tags" style="padding:4px;">
                            <button type="button" class="btn btn-danger" onclick="closeSession()">关闭连接</button>
                            <span id="connections" class="badge"></span>
                        </form>
                        <table class="table">
                            <thead>
                                <tr>

                                    <th style="width:40px;"><input type="checkbox" onclick="selectAll(this)" /></th>
                                    <th>Name</th>
                                    <th>IPAddress</th>
                                </tr>
                            </thead>
                            <tbody id="lstUser">
                                <tr v-for="item in Data"><td><input v-bind:id="item.ID" type="checkbox" /></td><td>{{item.Name}}</td><td>{{item.IPAddress}}</td></tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var activeRoom;
            var lstRoom;
            var lstRoomControl;
            var lstUserControl;
            var lstTalkControl;
            $(document).ready(function () {
                lstRoomControl = new Vue({
                    el: '#lstRoom',
                    data: { Data: [] }
                });
                lstUserControl = new Vue(
                    {
                        el: '#lstUser',
                        data: { Data: [] }
                    }
                );
                lstTalkControl = new Vue({
                    el: '#lstTalk',
                    data: { Data: [] }
                });
                listRoom();
            });

            function selectAll(e) {
                var checkedOfAll = $(e).prop("checked");
                $("input[type='checkbox']").prop("checked", checkedOfAll);
            }

            function getSelectItems() {
                var items = new Array();
                $("input[type='checkbox']").each(function () {
                    if ($(this).prop("checked") == true && $(this).prop("id"))
                        items.push($(this).attr('id'));
                });
                return items;
            }

            async function closeSession() {
                var items = getSelectItems();
                if (items.length > 0) {
                    if (confirm('是否要清除告诉的连接?')) {
                        var result = await ChatCloseSession(items);
                    }
                }
            }
            async function selectRoom(name) {

                activeRoom = name;
                listRoomUsers();
            }

            async function listRoomUsers() {

                var result = await ChatGetRoomOnlines(activeRoom);
                lstUserControl.Data = result.Data;



            }

            async function listRoom() {
                var result = await ChatListRooms();
                lstRoomControl.Data = result.Data;
            }
            async function closeRoom(name) {
                if (confirm('是否要关闭房间?')) {
                    var result = await ChatCloseRoom(name);
                    if (result.Code == 200) {
                        listRoom();
                    }
                    else {
                        alert(result.Error);
                    }
                }
            }

            api_connect(async function () {
                listRoom();
                $('#lstbody').empty();
                await ChatLogin('admin');
            });
            function GetTime() {
                var now = new Date();
                return now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
            }
            api_receive(function (result) {
                console.log(JSON.stringify(result));
                switch (result.Data.Type) {
                    case "Talk":
                        lstTalkControl.Data.push({ Type: 'Talk', Room: result.Data.Room, Time: GetTime(), Name: result.Data.Name, Message: ' 说:' + result.Data.Message });
                        break;
                    case "CheckIn":
                        lstTalkControl.Data.push({ Type: 'CheckIn', Room: result.Data.Room,Time: GetTime(), Name: result.Data.Name, Message: ' 进入房间' });
                        listRoomUsers();
                        break;
                    case "CheckOut":
                        lstTalkControl.Data.push({ Type: 'CheckOut', Room: result.Data.Room, Time: GetTime(), Name: result.Data.Name, Message: ' 退出房间' });
                        listRoomUsers();
                        break;
                    case "Delete":
                        alert('房间已关闭！');
                        $('#talkBar').hide();
                        listRoom();
                        activeRoom = null;
                        break;
                    case "CreateRoom":
                        listRoom();
                        break;
                }
                var objDiv = document.getElementById("lstTalk");
                objDiv.scrollTop = objDiv.scrollHeight;
            });


        </script>
</body>

</html>